<template>
<!-- 医生卡主div -->
<div class='doctorcard-border'>
  <div class='doctorcard-main' @click='chooseDoctor'> 
    <!-- 头像div -->
    <div class='divHeadIcon doctorcard-img'>
    <img :src='imgUrl' />
    </div>
    <!-- 医生名、职称div -->
    <div class='doctorcard-info'>
      <!-- <div class='doctorcard-infocenter'> -->
      <h3>{{ doctor.doctorName }}</h3>
      <p>{{ doctor.title }}</p>
      <!-- </div> -->
    </div>
  </div>
</div>
</template>

<script>
import {util} from '../../utils/util.js'
export default {
  data () {
    return {
      baseinfo: 'info',
      imgUrl: require('../../assets/doctorimg1.jpg')
    }
  },
  props: {
    doctor: {
      doctorName: '陈一言',
      iconUrl: '',
      title: '主治医师',
      gender: 'M',
      doctorId: '0'
    }
  },
  methods: {
    chooseDoctor() {
      this.$emit('chooseDocotor',this.doctor.docotorId)
    }
  },
  watch: {
    // 监视props传进来的头像url是否为空，不为空才使用该url，否则使用默认地址
    doctor: function (val, oldVal) {
      let url = val.iconUrl
      let emptyFlag = isEmpty(url)
      if(!emptyFlag) {
        this.imgUrl = require(url + '')
      } else {
        this.imgUrl = require('../../assets/doctorimg1.jpg')
      }
    }
  }
}
</script>

<style scoped>
.doctorcard-border {
  border:1px solid darkgray;
  background-color: white;
  /* margin: 5px 0; */
  padding: 10px;
}
.doctorcard-main {
  min-height: 75px;
  overflow: hidden;
  /* display: flex; */
  background-color: white;
}

.doctorcard-img {
  width: 70px;
  margin: 0;
  padding: 0;
  float: left;
  /* align-self:center; */
}
.doctorcard-info{
  margin: 0;
  /* 设置图片和医生名的左右距离 */
  padding-left: 15px;
  text-align: left;
  height: 100%;
  float: left;
  /* align-self:center; */
  /* display: flex; */
}
/* .doctorcard-infocenter{
  align-self:center;
} */
h3,p{
  margin: 0;
}
h3{
  /* 设置医生名和职称之间的上下距离 */
  padding-bottom: 5px;
  margin-top: 10px;
}
</style>